<template>
  <div id="addSystem">
    <div class="content">
      <div class="top">
        <div class="logo">
          <img src="../../../../assets/img/balckTextLogo.png"
               alt="" />
        </div>
        <div class="account">
          <span class="phone">{{ information.admin_user.name }}</span>
          <span class="bt">
            <el-button type="text"> 登出 </el-button>
          </span>
        </div>
      </div>
      <el-form ref="form">
        <div class="addBody">
          <div class="add">
            <div class="title">创建门店</div>
            <div class="name">
              <span>门店名称</span>
              <span>
                <el-input v-model="form.name"
                          style="width: 280px"> </el-input>
              </span>
            </div>
            <div class="type">
              <span>门店类型</span>
              <span style="margin-left: 16px">
                <el-radio v-model="form.mode"
                          label="1">民宿</el-radio>
                <el-radio v-model="form.mode"
                          label="2">酒店</el-radio>
              </span>
            </div>
            <div class="areaID">
              <span>门店地址</span>
              <span style="margin-left: 16px">
                <!-- Cascader 省级地址 级联选择器            -->
                <el-cascader v-model="form.areaID"
                             style="width: 280px"
                             ref="cascaderArea"
                             class="el-cascader-panel"
                             :options="addressOptions"
                             @change="selectAddess(form.areaID)"
                             :props="selectAddressConfig"
                             size="medium"></el-cascader>
              </span>
            </div>
            <div class="detilAdress">
              <span>详细地址</span>
              <span>
                <el-input v-model="form.address"
                          style="width: 280px">
                </el-input>
              </span>
            </div>
            <div class="linkman">
              <span>联系人</span>
              <span>
                <el-input v-model="form.landlord_name"
                          style="width: 280px; margin-left: 30px">
                </el-input>
              </span>
            </div>
            <div style="display: flex; justify-content: space-evenly">
              <el-button>取消申请</el-button>
              <el-button type="primary"
                         @click="sumbit">提交申请</el-button>
            </div>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getAreaFirst, getAreaCode } from '@/api/address.js'
import { AddHotel } from '@/api/basis.js'
export default {
  data () {
    return {
      form: [
        { name: '' },
        { mode: '' },
        { areaID: '', province_id: '', city_id: '', county_id: '' },
        {
          address: '',
        },
        {
          landlord_name: '',
        },
      ],

      detilAddress: '',
      linkman: '',
      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎',
        },
        {
          value: '选项4',
          label: '龙须面',
        },
        {
          value: '选项5',
          label: '北京烤鸭',
        },
      ],
      addressOptions: [], //Cascader 可选项数据源
      addressOptions2: [], //Cascader省级中 可选项数据源
      cityAddress: [], //Cascader市级级中 可选项数据源
      areaName: [], //存放地址数据
      areaID: [], //存放地址ID
      province_id: '', //地址一级
      city_id: '', //地址二级
      county_id: '', //地址三级
      town_id: '', //地址四级
      selectAddressConfig: {
        //Cascader prop选项
        lazy: true,
        // checkStrictly: true,
        lazyLoad (node, resolve) {
          if (node.data != undefined)
            getAreaCode({
              code: node.data.code,
            }).then((res) => {
              const nodes = res.data.data.map((item) => ({
                value: item.id,
                code: item.code,
                label: item.name,
                leaf: item.level >= 3,
              }))
              resolve(nodes)
            })
        },
      },
    }
  },
  methods: {
    async sumbit () {
      let data = {
        name: this.form.name,
        mode: this.form.mode,
        province_id: this.form.province_id,
        city_id: this.form.city_id,
        county_id: this.form.county_id,
        address: this.form.address,
        landlord_name: this.form.landlord_name
      }
      await AddHotel(data).then(res => {
        console.log(res);
      })
      console.log(data);
    },
    getSessionStorage () {
      let information = sessionStorage.getItem('account-information')
      this.information = JSON.parse(information)
    },

    //地址选择完成 -- 返回数据
    selectAddess (id) {
      console.log(id)
      if (id) {
        this.form.province_id = id[0]
        this.form.city_id = id[1]
        this.form.county_id = id[2]
      }
      // let areaLabel = this.$refs.cascaderArea[0].getCheckedNodes()[0].pathLabels.join('')
      // if (id) {
      //   this.form[item.area.area1] = id[0]
      //   this.form[item.area.area2] = id[1]
      //   this.form[item.area.area3] = id[2]
      //   // this.form[item.area.area4] = id[3] != undefined ? id[3] : 0 //假如三级地址，默认最后一级id为"0"
      //   this.form.areaLabel = areaLabel
      // }
      // this.areaName = this.$refs.cascaderArea[0].getCheckedNodes()[0].pathLabels
      // this.areaID = id
      // console.log(this.areaName, this.areaID)
    },

    //当只有省级地址
    getAddress () {
      this.getAreaFirst2()
    },
    //挑选市级
    getAddress2 () {
      this.selectAddess2()
    },
    //当只有省级地址时， 地址选择完成 -- 返回数据
    selectAddess2 (id, item) {
      let city_code
      this.addressOptions2.forEach((item) => {
        if (item.value == id) {
          city_code = item.code
        }
      })
      if (id) {
        this.form[item.area1] = id[0]
      }
      console.log(this.form)
      getAreaCode({ code: city_code }).then((res) => {
        let array = []
        const DATA = res.data
        if (DATA.code == 200) {
          this.cityAddress = DATA.data.map((area) => {
            return {
              value: area.id, //地址ID
              label: area.name, //地址名称
              code: area.code, //地址的Code
              level: area.level,
              leaf: area.level >= 2,
              children: [],
            }
          })
        }
      })
    },
    //有市级地址时， 地址选择完成 -- 返回数据
    selectAddess3 (id, item) {
      if (id) {
        this.form[item.area2] = id[0]
      }
    },
    //获得地图一级标签
    async getAreaFirst () {
      getAreaFirst().then((res) => {
        const DATA = res.data
        const areaArr = this.form.area
        let array = []
        if (DATA.code == 200) {
          this.addressOptions = DATA.data.map((area) => {
            return {
              value: area.id, //地址ID
              label: area.name, //地址名称
              code: area.code, //地址的Code
              level: area.level,
              leaf: area.level >= 3,
              children: [],
            }
          })
          //地址四级 根据地址id 递归回显
          if (typeof areaArr != 'undefined') {
            this.addressOptions.forEach(async (arrItem) => {
              if (arrItem.value == areaArr[0]) {
                arrItem.children = await this.getAreaCode(arrItem.code)
                arrItem.children.forEach(async (arrItem) => {
                  if (arrItem.value == areaArr[1]) {
                    arrItem.children = await this.getAreaCode(arrItem.code)
                    arrItem.children.forEach(async (arrItem) => {
                      if (arrItem.value == areaArr[2]) {
                        arrItem.children = await this.getAreaCode(arrItem.code)
                        //假如地址只有三级的话，最后一级默认0，方便回显
                        // if (arrItem.children.length == 0) {
                        //   arrItem.leaf = false
                        //   arrItem.children = [{
                        //     value: 0,
                        //     label: '',
                        //     level: 4,
                        //     leaf: true
                        //   }]

                        // }
                      }
                    })
                  }
                })
              }
            })
          }
        }
      })
    },
    getAreaCode (area_code) {
      const _this = this
      return new Promise((resolve) => {
        let array = []
        getAreaCode({ code: area_code }).then((res) => {
          const DATA = res.data
          if (DATA.code == 200) {
            array = DATA.data.map((area) => {
              return {
                value: area.id, //地址ID
                label: area.name, //地址名称
                code: area.code, //地址的Code
                level: area.level,
                leaf: area.level >= 3,
                children: [],
              }
            })
            resolve(array)
          }
        })
      })
    },
    async getAreaFirst2 () {
      getAreaFirst().then((res) => {
        const DATA = res.data
        const areaArr = this.form.area
        let array = []
        if (DATA.code == 200) {
          this.addressOptions2 = DATA.data.map((area) => {
            return {
              value: area.id, //地址ID
              label: area.name, //地址名称
              code: area.code, //地址的Code
              level: area.level,
              leaf: area.level >= 1,
              children: [],
            }
          })
          console.log(this.addressOptions2)
          //地址四级 根据地址id 递归回显
          if (typeof areaArr != 'undefined') {
            this.addressOptions2.forEach(async (arrItem) => {
              if (arrItem.value == areaArr[0]) {
                arrItem.children = await this.getAreaCode(arrItem.code)
                arrItem.children.forEach(async (arrItem) => {
                  if (arrItem.value == areaArr[1]) {
                    arrItem.children = await this.getAreaCode(arrItem.code)
                    arrItem.children.forEach(async (arrItem) => {
                      if (arrItem.value == areaArr[2]) {
                        arrItem.children = await this.getAreaCode(arrItem.code)
                      }
                    })
                  }
                })
              }
            })
          }
        }
      })
    },
  },
  created () {
    this.getSessionStorage()
    this.getAreaFirst()
  },
  watch: {
    form: function () {
      if (this.form != undefined && this.form.hasOwnProperty('area')) {
        this.getAreaFirst()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;

  .top {
    .account {
      float: right;
      line-height: 56px;
      margin-right: 20px;

      .phone {
        margin-right: 50px;
      }
    }

    width: 100%;
    background-color: white;
    height: 56px;

    .logo {
      top: 5px;
      left: 30px;
      position: absolute;
      text-align: center;
      font-size: 18px;
      color: #606266;
      display: flex;
    }
  }

  .addBody {
    display: flex;
    justify-content: space-evenly;

    .add {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;

      .el-input {
        margin-left: 16px;
      }

      padding-left: 45px;
      padding-right: 40px;
      margin-top: 100px;
      width: 360px;
      height: 573px;
      background-color: white;
      border-radius: 5px;

      .title {
        font-size: 28px;
        text-align: center;
      }
      .areaID {
        display: flex;
      }
    }
  }
}
</style>
